<template>
  <div id="myChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
export default {
  data() {
    return {}
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      var chartDom = document.getElementById('myChart')
      var myChart = this.$echarts.init(chartDom)
      var option = {
        title: {
          text: '项目总体进度分许进度',
          left: 'left',
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月', '10月', '11月', '12月',],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name:'计划完成',
            data: [100, 140, 220, 100, 130,100, 140, 220, 100, 130,150,130],
            type: 'bar',
            barGap: 0,//间距为0
            barWidth: 25,
            itemStyle:{
                color:'#409EFF'
            },
            
          },
          {
            name:'实际完成',
            data: [120, 150, 180, 110, 130,120, 150, 150, 100, 120,160,130],
            type: 'bar',
            barWidth: 25,
            itemStyle:{
                color:'#30e3ca'
            }
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped></style>
